<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
        }

        table td {
            border: 1px solid #ccc;
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>动态表格</h1>
        <label for="">行：</label>
        <input type="text" id="row">
        <label for="">列：</label>
        <input type="text" id="col">
        <input type="button" id="btn" value="生成">
        <div id="output">
            <!-- <table>
                <tbody>
                    <tr>
                        <td>
                            <button>删除</button>
                            <button>复制</button>
                        </td>
                    </tr>
                </tbody>
            </table> -->
        </div>
    </div>

    <script>
        var btn = document.querySelector('#btn');
        var col = document.querySelector('#col');
        var row = document.querySelector('#row');
        var output = document.querySelector('#output');
        btn.onclick = function () {
            var _row = row.value;
            var _col = col.value;
            var table = document.createElement('table');
            var tbody = document.createElement('tbody');

            table.appendChild(tbody);
            for (var i = 0; i < _row; i++) {
                var tr = document.createElement('tr');
                if (i % 2 == 0) {
                    tr.style.background = '#ccc';
                }
                for (var j = 0; j < _col; j++) {
                    var td = document.createElement('td');
                    if (j % 10 == 9) {
                        td.innerHTML = '<button id="Sbtn" onclick="del(this)">删除</button>' + '<button id="Fbtn">添加</button>'
                    } else {
                        td.innerHTML = '单元格' + i + j;
                    }

                    tr.appendChild(td);

                }

                tbody.appendChild(tr);

            }
            output.appendChild(table);
        }

        //删除行
        function del(t){
            var tr = t.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
        }
        var allTr = document.getElementsByTagName('tr');
        for(var n = 0; n < allTr.length; n++){
                allTr[n].onclick = del;
        }
            // this.parentNode.remove;
            
        
    </script>
</body>

</html>